{% extends "base.html" %}
{% block title %}Create account — LegalEase AI{% endblock %}

{% block navbar %}
<nav class="navbar">
    <a class="navbar-brand" href="/"><i class="fas fa-balance-scale"></i> LegalEase AI</a>
    <div class="navbar-nav">
        <span class="nav-user" style="border:none;">Already registered?</span>
        <a href="/api/auth/login" class="btn btn-outline btn-sm">Sign in</a>
    </div>
</nav>
{% endblock %}

{% block extra_styles %}
<style>
.auth-container { min-height: calc(100vh - 68px); display: flex; align-items: center; justify-content: center; padding: 2rem; background: var(--wash); }
.auth-card { background: var(--paper); border: 1px solid var(--border); border-radius: 16px; box-shadow: 0 10px 40px -10px rgba(15,21,34,0.12); padding: 2.6rem; width: 100%; max-width: 480px; }
.auth-logo { text-align: center; margin-bottom: 2rem; }
.auth-logo i { font-size: 2rem; color: var(--accent); }
.auth-logo h2 { color: var(--ink); margin-top: 0.7rem; font-size: 1.6rem; letter-spacing: -0.02em; }
.auth-logo p { color: var(--muted); font-size: 0.9rem; margin-top: 0.25rem; }
.role-selector { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.5rem; }
.role-option { border: 1.5px solid var(--border); border-radius: 12px; padding: 1rem 0.9rem; text-align: center; cursor: pointer; transition: all 0.18s; background: var(--paper); }
.role-option:hover { border-color: var(--accent); }
.role-option input { display: none; }
.role-option.selected { border-color: var(--accent); background: rgba(29,78,216,0.05); box-shadow: 0 0 0 3px var(--accent-glow); }
.role-option i { font-size: 1.3rem; color: var(--accent); display: block; margin-bottom: 0.4rem; }
.role-option span { font-size: 0.9rem; font-weight: 600; color: var(--ink); }
.role-option small { display: block; color: var(--muted); font-size: 0.74rem; margin-top: 0.2rem; font-weight: 400; }
.auth-alt { text-align:center; font-size:0.9rem; color:var(--muted); margin-top: 1.2rem; }
.auth-alt a { color: var(--accent); font-weight: 600; text-decoration: none; }
.auth-alt a:hover { text-decoration: underline; }
</style>
{% endblock %}

{% block content %}
<div class="auth-container">
    <div class="auth-card reveal">
        <div class="auth-logo">
            <i class="fas fa-balance-scale"></i>
            <h2>Create your account</h2>
            <p>Free to start — describe your first case in minutes</p>
        </div>

        {% if error %}
        <div class="alert alert-error"><i class="fas fa-exclamation-circle"></i> {{ error }}</div>
        {% endif %}

        <form method="POST" action="/api/auth/register">
            <div class="form-group">
                <label class="form-label">Full name</label>
                <input type="text" name="full_name" class="form-control" placeholder="Your full name" required>
            </div>
            <div class="form-group">
                <label class="form-label">Email address</label>
                <input type="email" name="email" class="form-control" placeholder="you@example.com" required>
            </div>
            <div class="form-group">
                <label class="form-label">Password</label>
                <input type="password" name="password" class="form-control" placeholder="Minimum 6 characters" required minlength="6">
            </div>
            <div class="form-group">
                <label class="form-label">City <span style="color:var(--muted);font-weight:400;">(helps match nearby lawyers)</span></label>
                <input type="text" name="city" class="form-control" placeholder="e.g. Lahore, Karachi, Islamabad">
            </div>
            <div class="form-group">
                <label class="form-label">I am joining as</label>
                <div class="role-selector">
                    <label class="role-option selected" id="client-role">
                        <input type="radio" name="role" value="client" checked>
                        <i class="fas fa-user"></i>
                        <span>Client</span>
                        <small>I need legal help</small>
                    </label>
                    <label class="role-option" id="lawyer-role">
                        <input type="radio" name="role" value="lawyer">
                        <i class="fas fa-briefcase"></i>
                        <span>Lawyer</span>
                        <small>I practice law</small>
                    </label>
                </div>
            </div>
            <button type="submit" class="btn btn-primary" style="width:100%;justify-content:center;padding:0.78rem;font-size:0.98rem;">
                Create account
            </button>
        </form>
        <p class="auth-alt">
            Already have an account? <a href="/api/auth/login">Sign in</a>
        </p>
    </div>
</div>
<script>
document.querySelectorAll('.role-option').forEach(el => {
    el.addEventListener('click', () => {
        document.querySelectorAll('.role-option').forEach(e => e.classList.remove('selected'));
        el.classList.add('selected');
    });
});
</script>
{% endblock %}